<!DOCTYPE html>
<html>
<script>
var count = 0;

if (window.testRunner) {
    testRunner.dumpAsText();
    testRunner.setPopupBlockingEnabled(false);
    testRunner.waitUntilDone();
}

function log(message)
{
    var console = document.getElementById("console");
    console.appendChild(document.createTextNode(message + "\n"));
}

function zoomPage()
{
    var newwindow = window.open("resources/dice.png");
    if (window.testRunner)
        testRunner.useUnfortunateSynchronousResizeMode();
    newwindow.onload = function() {
        newwindow.onresize = function() {
            var image = newwindow.document.querySelector("img");
            if (image.clientWidth == 0) {
              // On GTK+, sometimes the resize callback fires before the GTK
              // window has finished resizing. If that happens, try to resize
              // again.
              setTimeout(function() {
                newwindow.resizeTo(400, 400);
              }, 0);
              return;
            }

            if (window.testRunner) {
                testRunner.zoomPageIn();
                log("Size at zoom level" + (count) + " : "  + image.clientWidth + "x" + image.clientHeight);
                ++count;
                if (count == 10) {
                    newwindow.onresize = undefined;
                    testRunner.notifyDone();
                }
            }
        };

        newwindow.resizeTo(400, 400);
    };
}
</script>
<body onload="zoomPage()">
<p>This tests that page zoom and image auto-sizing interact well together.  This test requires testRunner to run.  To test manually, open <a href="resources/dice.png">this image</a> in a browser window, resize the window to 600px tall and zoom in 10 times.  The image should get bigger at each step proportionately.</p>
<pre id="console"></pre>
</body>
</html>
